<!--页面 -->
<template>
	<div class="min-minwidth" id="findpassview" @keyup.enter="regfun">
		<img class="footerimg" src="@/assets/logoh.png" alt="" />
		<div class="logoactive marginAuto">
			<div class="logoactive-logo ">
				<img class="logoimage" src="@/assets/logo.png" alt="" />
			</div>
		</div>
		<div class="welcome marginAuto">欢迎来到豫图网</div>
		<div class="taglogin marginAuto">
			<div class="tagloginmain flex">
				<div class="taglogineach curpoin" >
					<span class="taglogineachtxt">找回密码</span>
					<p class="taglogineachac mainbg"></p>
				</div>
			</div>
		</div>
		<div class="from">
			<div class="from-each">
				<div class="from-eachinput">
					<el-input class="from-eachinput" maxlength="11" v-model="formdata.mobile" placeholder="手机号/账号"></el-input>
				</div>
			</div>
			<div class="from-each">
				<div class="from-eachinput">
					<el-input class="from-eachinput" type="text" v-model="formdata.veri" placeholder="验证码"></el-input>
					<div class="veri">
						<div class="verimain curpoin">
							<span class="each-code-y" v-if="!formdata.istime" @click="vericlickfun()">发送验证码</span>
							<span class="each-code-j" v-if="formdata.istime">{{formdata.times}}s</span>
						</div>
					</div>
				</div>
			</div>
			<div class="from-each">
				<div class="from-eachinput">
					<el-input class="from-eachinput" type="password" v-model="formdata.password"
						placeholder="密码"></el-input>
				</div>
			</div>
			<div class="from-each">
				<div class="from-eachinput">
					<el-input class="from-eachinput" type="password" v-model="formdata.password2"
						placeholder="确认密码"></el-input>
				</div>
			</div>
		</div>
		<div class="btneach">
			<el-button class="btnlogin mainbg" type="primary" @click="regfun">确认</el-button>
		</div>
		<div class="findpass marginAuto mainColor curpoin" @click="$router.go(-1)">返回登录页</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formdata: {
					istime: false,
					times: 60,

					mobile: '',
					veri:'',
					password: '',
					password2: ''
				}
			}
		},
		beforeCreate() {},
		mounted() {},
		methods: {
			regfun(){
				let sendData = {
					mobile:this.formdata.mobile,
					password:this.formdata.password,
					password_confirm:this.formdata.password2,
					sms_code:this.formdata.veri,
				};
				if(this.formdata.mobile == '' || this.formdata.password==''){
					this.$message({
					  message: '请将信息补充完整',
					  type: 'warning'
					});
					return false
				};
				if(!this.apifun.testphone.test(this.formdata.mobile)){
					this.$message({
					  message: '手机号格式错误',
					  type: 'warning'
					});
					return false
				};
				this.apifun.$post('/pc/user/retrieve',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '操作成功',
							type: 'success'
						});
						this.$router.push('/login')
					}
				})
			},
			vericlickfun(){  // 发送验证码
				let that = this;
				let flag = true;
				if (this.apifun.testphone.test(this.formdata.mobile) == false || this.formdata.mobile == '') {
					this.$message({
					  message: '手机号格式错误',
					  type: 'warning'
					});
					return false
				};
				if (flag) {
					flag = false;
					let index = 60;
					this.formdata.istime = true;
					let time = setInterval(() => {
						if (index > 0) {
							--index;
							this.formdata.times = index;
						} else {
							index = 60;
							clearInterval(time)
							this.formdata.istime = false;
							flag = true;
						}
					}, 1000);
				}
				let sendData = {
					mobile: this.formdata.phone,
					type:6
				}
				// 请求
				this.apifun.$post('/pc/user/sendSms',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
						  message: '发送成功',
						  type: 'success'
						});
					}
				})
			}
		}
	}
</script>
<style>
	#findpassview .el-input__inner{
		background-color:#F6F6F6;
		border-color:#F6F6F6;
		height: 40px;
		line-height: 40px;
	}
	#findpassview .el-input__inner:focus{
		border-color:#FF5E03;
	}
</style>
<style scoped lang="scss">
	.footerimg {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 200px;
		height: 164px;
	}

	.logoactive {
		width: 90%;
		padding-top: 50px;

		.logoactive-logo {
			width: 150px;
			height: 50px;

			img {
				width: 150px;
				height: 50px;
			}
		}
	}

	.welcome {
		width: 90%;
		line-height: 40px;
		font-size: 24px;
		font-weight: bold;
	}

	.taglogin {
		width: 90%;

		.tagloginmain {
			padding-top: 35px;
		}

		.taglogineach {
			position: relative;
			font-size: 18px;
			color: #333333;
			line-height: 30px;
			margin-right: 40px;

			.taglogineachtxt {
				font-weight: bold;
			}

			.taglogineachac {
				position: absolute;
				bottom:0px;
				left: 50%;
				width: 50px;
				margin-left: -25px;
				height: 3px;
				border-radius: 3px;
			}
		}
	}

	.from {
		margin-top: 20px;

		.from-each {
			width: 90%;
			margin: 0 auto 20px;

			.from-eachinput {
				position: relative;
				height: 50px;
				line-height: 50px;
				color: #333;
				font-size: 16px;
				background-color: #F6F6F6;
				border: none;

				.veri {
					position: absolute;
					z-index: 10;
					right:0px;
					top: 2px;
					width: 120px;
					height: 43px;
					background-color: #F6F6F6;

					.verimain {
						width: 120px;
						height: 22px;
						line-height:22px;
						margin-top:9px;
						border-left: 1px solid #FF5E03;
						text-align: center;
						color: #FF5E03;
						font-size: 16px;
					}
				}
			}
		}
	}

	.goregis {
		width: 90%;
		line-height: 30px;
		font-size: 18px;
		color: #333;
	}

	.btneach {
		width: 90%;
		margin: 30px auto;

		.btnlogin {
			width: 100%;
			height: 48px;
			border: none;
			font-size: 18px;
			border-radius: 10px;
		}
	}

	.findpass {
		width: 90%;
		line-height: 30px;
		text-align: center;
		font-size: 18px;
	}
</style>